<template>
	<div id="mygold">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>我的金币</p>
		</div>
		<!---------金币余额-------------->
		<div class="mygold_1">
			<p>金币余额</p>
			<p class="gold_num">{{mygold.coins}}</p>
			<p class="gold_all">您已累计获得{{mygold.allCoins}}金币</p>
		</div>
		<!---------金币功能------------>
		<div class="mygold_2">
			<router-link :to="{path:'/user/makegold',query:{type:1}}">
				<img src="../../static/img/mygold-01.png"/>
				<p>赚金币</p>
			</router-link>
			<router-link :to="{path:'/user/makegold',query:{type:2}}">
				<img src="../../static/img/mygold-02.png"/>
				<p>花金币</p>
			</router-link>
			<router-link to='/user/recharge'>
				<img src="../../static/img/mygold-03.png"/>
				<p>充金币</p>
			</router-link>
		</div>
		<!----------金币流水------------->
		<div class="mygold_3">
			<ul>
				<li @click="streamType = 1">
					<p :class="streamType==1?'mygold_3_active':''">全部</p>
				</li>
				<li @click="streamType = 2">
					<p :class="streamType==2?'mygold_3_active':''">收入</p>
				</li>
				<li @click="streamType = 3">
					<p :class="streamType==3?'mygold_3_active':''">支出</p>
				</li>
			</ul>
			<div v-for="item in goldList" class="mygold_3_item" @click="seeDetail(item)">
				<div class="item_left">
					<p>{{item.remark}}</p>
					<p>{{getDate(item.createtime)}}</p>
				</div>
				<p v-if="item.money > 0" class="money_add">{{item.money}}</p>
				<p v-else class="money_reduce">{{item.money}}</p>
			</div>
		</div>
		<!---------详情弹窗------------>
		<div v-show="detail" id="feedback_detail" @click="detail = false">
			<div class="feedback_detail">
				<div class="detail_1">
					<p class="detail_title">{{stream.typeName}}</p>
					<p class="detail_time">{{getDate(stream.createtime)}}</p>
					<span @click="detail = false">X</span>
				</div>
				<div class="detail_2">
					<p>{{stream.remark}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'mygold',
	data:function(){
		return{
			mygold:{
				coins:0,//金币余额
				allCoins: 0,//累计金币数
			},
			goldList:[],
			streamType: 1,//流水类型
			stream:{}, // 详情
			detail: false, // 控制弹窗显示隐藏
		}
	},
	methods:{
		// ----- 获取我的金币 -----
		getMyCoins: function(){
			var _this = this;
			_this.$axios.post("/user/wallet/getWalletInfo").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.mygold = data.result;
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		// ----- 获取金币流水 -----
		getCoinsFlow: function(){
			var _this = this;
			var type;
			if(_this.streamType == 1){
				type = null;
			}else if(_this.streamType == 2){
				type = 1;
			}else if(_this.streamType == 3){
				type = 2;
			}
			let postData = _this.$qs.stringify({
				coinsType: 1,
				type: type,
			});
			_this.$axios.post("/user/walletFlow/getUserFlow", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.goldList = data.result;
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
		seeDetail: function(item){
			this.stream = item;
			this.detail = true;
		}
	},
	watch: {
		streamType(){
			this.getCoinsFlow();
		}
	},
	created: function(){
		this.getMyCoins();
		this.getCoinsFlow();
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#mygold{
	height: 100%;
	padding: 4rem 0;
	box-sizing: border-box;
}
/*-------金币余额---------*/
.mygold_1{
	background: url('../../static/img/mygold-04.png') no-repeat;
	background-size: 100% 100%;
	height: 10rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.mygold_1 p{
	color: #FFFFFF;
	font-size: 1.4rem;
}
.mygold_1 .gold_num{
	font-size: 2.4rem;
	margin: 0.6rem 0;
}
.mygold_1 .gold_all{
	background-color: #FFB93D;
	font-size: 1.2rem;
	padding: 0.2rem 1rem;
	border-radius: 50px;
}
/*-----------金币功能------------*/
.mygold_2{
	display: flex;
	background-color: #fff;
}
.mygold_2 a{
	width: 34%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1rem 0;
	font-size: 1.2rem;
	color: #4F4F4F;
}
.mygold_2 a img{
	height: 3rem;
	display: block;
	margin-bottom: 0.5rem;
}
/*--------金币流水-----------*/
.mygold_3{
	background-color: #fff;
	margin-top: 1rem;
}
.mygold_3 ul{
	display: flex;
	border-bottom: 1px solid #EEEEEE;
}
.mygold_3 ul li{
	width: 34%;
	height: 3rem;
	border-right: 1px solid #EEEEEE;
	display: flex;
	justify-content: center;
}
.mygold_3 ul li p{
	height: 100%;
	border-bottom: 2px solid transparent;
	display: flex;
	align-items: center;
	color: #4F4F4F;
	font-size: 1.2rem;
	padding: 0 0.5rem;
	box-sizing: border-box;
}
.mygold_3 ul li p.mygold_3_active{
	border-bottom: 2px solid #FF6565;
	color: #FF6565;
}
.mygold_3_item{
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid #EEEEEE;
	box-sizing: border-box;
}
.item_left{
	width: 70%;
}
.item_left p:first-child{
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #4F4F4F;
	font-size: 1.4rem;
	margin-bottom: 1rem;
}
.item_left p:last-child{
	font-size: 1.2rem;
	color: #A9A9A9;
}
.mygold_3_item .money_add{
	color: #FF6565;
	font-size: 1.4rem;
}
.mygold_3_item .money_reduce{
	color: #A9A9A9;
	font-size: 1.4rem;
}
#feedback_detail{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 11;
}
.feedback_detail{
	width: 90%;
	background-color: #fff;
	border-radius: 5px;
}
.detail_1{
	padding: 0.5rem 0;
	position: relative;
	border-bottom: 1px solid #EEEEEE;
}
.detail_1 .detail_title{
	color: #4F4F4F;
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 0.5rem;
}
.detail_1 .detail_time{
	color: #A9A9A9;
	font-size: 1rem;
	text-align: center;
}
.detail_1 span{
	color: #3BA5EA;
	font-size: 1.4rem;
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
}
.detail_2{
	padding: 1rem;
	box-sizing: border-box;
	min-height: 10rem;
	font-size: 1.2rem;
	color: #787878;
	line-height: 1.5em;
	position: relative;
}
.detail_2 p{
	word-wrap: break-word;
}
</style>